<script lang="ts" setup name="MatchAssistant">
import type { MatchMembersInfo } from './types';

import { computed, onMounted, provide, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import assistantRow from './components/assistantRow.vue';
import CurrentMatch from './utils/matchAssistant';
import { GetPerTeams } from './utils/preTeams';

const { t } = useI18n()

// 计算对局是否正在进行
const matchRunning = computed(() => {
  return CurrentMatch.inChampSelect() || CurrentMatch.inMatch()
})

// 预组队，puuid 数组
const preTeams = ref([]) // 存储分组的puuid数组
const preGames = ref<{ puuid: string, games: string[] }[]>([])
// 计算预组队
function preTeam(games) {
  // 检查是否已经存在相同的puuid
  const existingIndex = preGames.value.findIndex((item) => item.puuid === games.puuid);
  if (existingIndex !== -1) {
    // 如果存在相同的puuid，更新games数组
    preGames.value[existingIndex].games = games.games;
    return;
  }
  preGames.value.push(games);

  preTeams.value = GetPerTeams(preGames.value)
}
provide('preTeam', preTeam)

const matchMembersInfo = ref<MatchMembersInfo>({})
const classGameFlow = new CurrentMatch((row) => {
  if (row === null) {
    matchMembersInfo.value = {}
    preTeams.value = []
    preGames.value = []
    return
  }
  matchMembersInfo.value = JSON.parse(JSON.stringify(row))
})

onMounted(() => {
  classGameFlow.getCurrentMatch()
})
</script>

<template>
  <div class="match_assistant h-full">
    <!-- {{ useClientStore().gameflow }} -->
    <!-- 判断是否选择英雄或游戏开始 -->
    <a-scrollbar v-show="matchRunning" outer-class="h-full w-full flex"
      class="page_main page_module h-full w-full overflow-auto">
      <a-grid v-for="team in matchMembersInfo.gameTeam" :key="team.teamId" :cols="5" :row-gap="10" :col-gap="10"
        class="assistant_team" :class="team.members.length <= 5 ? 'h-50%' : 'h-full'">
        <a-grid-item v-for="member in team.members" :key="member.puuid" class="assistant_item">
          <assistant-row :data="member" :pre-teams="preTeams" />
        </a-grid-item>
      </a-grid>
    </a-scrollbar>
    <div v-show="!matchRunning" class="page_main page_module h-full flex items-center justify-between">
      <a-empty>
        <template #image>
          <icon-exclamation-circle-fill />
        </template>
        {{ t(`HistoryRecord.NotFound`) }}
      </a-empty>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.match_assistant {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  width: 100%;
  padding: 8px 0;

  .assistant_team {
    padding: 7px 15px;
    width: 100%;

    .assistant_item {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
}
</style>
